<template>
  <!-- v-if="cateDetail.goods_name"有值了就开始渲染，不会进行价格闪烁问题 -->
  <view class="Box" v-if="cateDetail.goods_name">
    
    <!-- 轮播图 -->
    <view class="swipImg">
      <!-- indicator-dots面板显示小点   autoplay是否自动切换   interval 自动切换时间间隔    duration  ？-->
      <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
        <swiper-item v-for="(item,index) in cateDetail.pics" :key="index" @click="preview(index)">
          <image :src="item.pics_big"></image>
        </swiper-item>
      </swiper>
    </view>
    
    <!-- 商品信息 -->
    <view class="cateInfo">
      <text user-select class="price">￥{{cateDetail.goods_price}}</text>
      
      <view class="c2">
        <text user-select class="name">{{cateDetail.goods_name}}</text>
        <view class="icon">
          <uni-icons type="star" size="18" @click="start(0)" v-show="isShow"></uni-icons>
          <uni-icons type="star-filled" size="18" @click="start(1)" v-show="!isShow"></uni-icons>
          <text class="clo">收藏</text>
        </view>
        
      </view>    
      
      <text class="clo">快递：免运费</text>
        
    </view>
    
    <!-- tup -->
    <rich-text :nodes="cateDetail.goods_introduce||'<div></div>'"></rich-text>
    
    <!-- 底部batter -->
    <view class="uni-container">
      <uni-section title="自定义用法" type="line">
      <uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
      </uni-section>
    </view>
    
  </view>
</template>

<script>//,mapMutations
  import {mapState,mapMutations,mapGetters} from "vuex"
  
  export default {
    computed:{
      //数据映射当前组件
      ...mapState("my_car",['carlist']),
      ...mapGetters("my_car",['total'])
    },
    watch:{
      total:{
        handler(newV){
          const op = this.options.find((x)=>x.text=="购物车")
          op.info = newV
        },
        immediate: true// immediate 属性用来声明此侦听器，是否在页面初次加载完毕后立即调用
      }
    },
    data() {
      return {
        cateDetail:[],
        isShow:true,
        options: [{
        			icon: 'shop',
        			text: '店铺',
        			info: 5,
        			infoBackgroundColor:'#007aff',
        			infoColor:"red"
        		}, {
        			icon: 'cart',
        			text: '购物车',
        			info: 0
        		}],
            buttonGroup: [{
              text: '加入购物车',
              backgroundColor: '#ff0000',
              color: '#fff'
            },
            {
              text: '立即购买',
              backgroundColor: '#ffa200',
              color: '#fff'
            }
            ]
      };
    },
    
    onLoad(options) {
      const goods_id = options.goods_id
      this.getcateDeatil(goods_id)
    },
    
    methods:{
      ...mapMutations("my_car",['getcarData']),
      async getcateDeatil(goods_id){
         const { data: res } = await uni.$http.get('/api/public/v1/goods/detail', { goods_id })
        if(res.meta.status!=200) return uni.showMsg()
        //解决商品展示图片有空白
        res.message.goods_introduce = res.message.goods_introduce.replace(/<img /g,'<img style="display:block;"')
        this.cateDetail = res.message
      },
      
      
      preview(index){//轮播图点击预览
        uni.previewImage({
          //显示要看的下标
          current:index,
          //图片所有的地址
          urls:this.cateDetail.pics.map(x=>x.pics_big)
        })
      },
      
      
      start(num){//收藏与取消
        if(num==0){
         uni.showMsg("收藏成功")
         this.isShow =false
        }else{
           uni.showMsg("取消收藏")
           this.isShow = true
        }
      },
      
      
      onClick(e){        
        if(e.index==1) return uni.switchTab({
          url:"/pages/cart/cart"
        })
      },
      
      
      buttonClick(e){
        if(e.content.text=="加入购物车"){
          // { goods_id, goods_name, goods_price, goods_count, goods_small_logo, goods_state }
          const goods = {
            goods_id:this.cateDetail.goods_id,
            goods_name:this.cateDetail.goods_name,
            goods_price:this.cateDetail.goods_price,
            goods_count:1,
            goods_small_logo:this.cateDetail.goods_small_logo,
            goods_state:true
          }
          this.getcarData(goods)
          // this.carlist.push(goods)
          console.log()
        }
        // uni.showMsg("购买成功")
      },
    
    
    }
  }
</script>

<style lang="scss">
    rich-text{
      padding-bottom: 100px;
      display: block;
    }
    swiper {
      height: 750rpx;
      image {
        width: 100%;
        height: 100%;
      }
    }
    .cateInfo{
      // margin: 5px;
      padding: 10px 5px;
      .clo{
        color: #7c7c7c;
      }
      .price{
        color: #91303c;
        font-size: 17px;
      }
      .c2{
        display: flex;
        align-items : center; 
        background-color: #f8f8f8;
        margin-bottom: 10px;
        .name{
          width: 85%;
          flex-wrap: wrap;
          margin-right: 10px;
          margin-top: 10px;
        }
        .icon{
          width: 10%;
          height: 10%;
          display: flex;
          flex-direction:column;
          border-left: 1px solid #eaeaea;
          text-align: center;
          padding:0px 5px;      
        }
      }
    }
    .uni-container{      
      uni-section{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
      }
    }
    
</style>
